<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .drag {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: skyblue;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="app1">
      <div ref="box" v-drag class="drag"></div>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
  <script src="./socket.io.js"></script>
  <script>
    let socket = io.connect(); //通过connect连接服务器
    let vm1 = new Vue({
      el: "#app1",
      // ⾃定义指令
      data: {
        newx: "",
        newy: "",
      },
      directives: {
        drag(el, bindings) {
          el.onmousedown = function (e) {
            let disx = e.pageX - el.offsetLeft;
            let disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
              el.style.left = e.pageX - disx + "px";
              el.style.top = e.pageY - disx + "px";
              let x = el.style.left;
              let y = el.style.top;
              let obj = {
                x: x,
                y: y,
              };
              socket.emit("coord", obj);
            };
            document.onmouseup = function () {
              document.onmousemove = document.onmouseup = null;
            };
          };
        },
      },
      created: async function (e) {
        await socket.on("send", (res) => {
          // console.log(res);
          this.newx = res.x;
          this.newy = res.y;
          let target = this.$refs.box;
          // console.log(this.newx,this.newy);
          target.style.left = this.newx;
          target.style.top = this.newy;
        });
      },
      // Mounted:function(){
      //   console.log($el);
      // }
    });

    // let button = document.querySelector("button");
    // //鼠标距离页面上左的距离 - 方块距离页面左上的距离
    // document.onmousedown = function (e) {
    //   //获取鼠标点击的位置距离左端的距离
    //   let offsetX = e.offsetX;
    //   //获取鼠标点击的位置距离上端的距离
    //   let offsetY = e.offsetY;
    //   document.onmousemove = function (e) {
    //     //当前鼠标点击位置距离浏览器左端的距离
    //     let clientX = e.clientX;
    //     //当前鼠标点击的位置距离浏览器顶部的距离
    //     let clientY = e.clientY;

    //     button.style.left = clientX - offsetX + "px";
    //     button.style.top = clientY - offsetY + "px";
    //   };
    //   document.onmouseup = function () {
    //     //当鼠标抬起的时候停止移动
    //     document.onmousemove = null;
    //     document.onmouseup = null;
    //   };
    // };
    // new Vue({
    //   el: "#app",
    //   methods: {
    //     button() {
    //       document.onmousedown = function (e) {
    //         //获取鼠标点击的位置距离左端的距离
    //         let offsetX = e.offsetX;
    //         //获取鼠标点击的位置距离上端的距离
    //         let offsetY = e.offsetY;
    //         document.onmousemove = function (e) {
    //           //当前鼠标点击位置距离浏览器左端的距离
    //           let clientX = e.clientX;
    //           //当前鼠标点击的位置距离浏览器顶部的距离
    //           let clientY = e.clientY;

    //           button.style.left = clientX - offsetX + "px";
    //           button.style.top = clientY - offsetY + "px";
    //         };
    //         document.onmouseup = function () {
    //           //当鼠标抬起的时候停止移动
    //           document.onmousemove = null;
    //           document.onmouseup = null;
    //         };
    //       };
    //     },
    //   },
    //   created: function () {},
    // });
  </script>
</html>
